<template>
  <div class="module-wrap">
    <div class="title-wrap config title-wrap_3">
      <span class="title">设备型号统计</span>
      <div class="option">
        <span>单位 : 数量</span>
      </div>
    </div>
    <div id="chart" ref="chartRef"></div>
  </div>
</template>

<script lang="tsx" setup>
import { onMounted, ref } from 'vue';
import { Col, Row } from 'ant-design-vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';
import { deviceModelStatistics } from '../api';

const formatData = (list) => {
  return list.map((item) => {
    return {
      name: item.model,
      value: item.count,
    };
  });
};

let chart: any;
const chartRef = ref();
const init = async () => {
  const res = await deviceModelStatistics();

  const { device, deviceTotalNum, edge, edgeTotalNum, power, powerTotalNum } =
    res.data;
  const _device = formatData(device);
  const _edge = formatData(edge);
  const _power = formatData(power);

  console.log(_device);
  console.log(_edge);
  console.log(_power);

  if (chart) chart.clear();
  chart = echarts.init(chartRef.value);
  const width = chart.getWidth();

  const option = {
    legend: [
      {
        top: '68%',
        left: '8%',
        orient: 'vertical',
        data: _device.map((item) => item.name),
        itemWidth: width / 60,
        itemHeight: width / 60,
        itemGap: width / 60,
        icon: 'circle',
        formatter: function (name) {
          const item = _device.find((i) => i.name == name);
          return `{name|${name}} {value|${item.value}}`;
        },
        textStyle: {
          rich: {
            name: {
              color: '#FFF',
              fontSize: width / 60,
            },
            value: {
              color: '#fff',
              fontSize: width / 60,
              padding: [0, 0, 0, 50], // 数值与名称的间距
            },
          },
        },
      },
      {
        orient: 'vertical',
        top: '68%',
        left: 'center',
        data: _power.map((item) => item.name),
        itemWidth: width / 60,
        itemHeight: width / 60,
        itemGap: width / 60,
        icon: 'circle',
        formatter: function (name) {
          const item = _power.find((i) => i.name == name);
          return `{name|${name}} {value|${item.value}}`;
        },
        textStyle: {
          rich: {
            name: {
              color: '#FFF',
              fontSize: width / 60,
            },
            value: {
              color: '#fff',
              fontSize: width / 60,
              padding: [0, 0, 0, 50], // 数值与名称的间距
            },
          },
        },
      },
      {
        orient: 'vertical',
        top: '68%',
        left: '75%',
        itemWidth: width / 60,
        itemHeight: width / 60,
        data: _edge.map((item) => item.name),
        itemGap: width / 60,
        icon: 'circle',
        formatter: function (name) {
          const item = _edge.find((i) => i.name == name);
          return `{name|${name}} {value|${item.value}}`;
        },
        textStyle: {
          rich: {
            name: {
              color: '#FFF',
              fontSize: width / 60,
            },
            value: {
              color: '#fff',
              fontSize: width / 60,
              padding: [0, 0, 0, 50], // 数值与名称的间距
            },
          },
        },
      },
    ],
    title: [
      {
        text: deviceTotalNum,
        subtext: '强震仪',
        left: '16%',
        top: '16%',
        textAlign: 'center',
        textStyle: {
          color: '#fff',
          fontSize: width / 20,
        },
        subtextStyle: {
          color: '#fff',
          fontSize: width / 40,
        },
      },
      {
        text: powerTotalNum,
        subtext: '智能电源',
        left: '49.5%',
        top: '16%',
        textAlign: 'center',
        textStyle: {
          color: '#fff',
          fontSize: width / 20,
        },
        subtextStyle: {
          color: '#fff',
          fontSize: width / 40,
        },
      },
      {
        text: edgeTotalNum,
        subtext: '边缘终端',
        left: '82.7%',
        top: '16%',
        textAlign: 'center',
        textStyle: {
          color: '#fff',
          fontSize: width / 20,
        },
        subtextStyle: {
          color: '#fff',
          fontSize: width / 40,
        },
      },
    ],
    series: [
      {
        type: 'pie',
        radius: ['50%', '60%'],
        center: ['50%', '30%'],
        data: _device,
        label: {
          show: false,
          position: 'center',
        },
        color: ['#6bc6f8', '#ffe57f', '#6ae4f6'],
        left: 0,
        right: '66.6667%',
        top: 0,
        bottom: 0,
      },
      {
        type: 'pie',
        radius: ['50%', '60%'],
        center: ['50%', '30%'],
        data: _power,
        color: ['#6bc6f8', '#ffe57f', '#6ae4f6'],
        label: {
          show: false,
          position: 'center',
        },
        left: '33.3333%',
        right: '33.3333%',
        top: 0,
        bottom: 0,
      },
      {
        type: 'pie',
        radius: ['50%', '60%'],
        center: ['50%', '30%'],
        color: ['#6bc6f8', '#ffe57f', '#6ae4f6'],
        data: _edge,
        label: {
          show: false,
          position: 'center',
        },
        left: '66.6667%',
        right: 0,
        top: 0,
        bottom: 0,
      },
    ],
  };
  chart.setOption(option);
  addEventListener(
    'resize',
    () => {
      console.log('触发');
      chart.resize();
    },
    false,
  );
};
onMounted(() => {
  init();
});
</script>
